<template>
    <div class="container">
        <my-search :fields="fieldsList" :baseNumber="2" @onSearch="searchForm" @onReset="resetForm" />

        <div class="table-list">
          
            <el-table v-loading="loading" border size="mini" stripe fit :data="tableDatas" 
            style="width: 100%" :height="$store.state.app.windowHeight - 200">
                <el-table-column type="index" label="序号" width="60" align="center" :index="currIndex">
                </el-table-column>
                <el-table-column show-overflow-tooltip v-for="(item,key) in tableColumns" :prop="item.prop" :label="item.label" :key="key" :min-width="item.minWidth" align="center">
                </el-table-column>
                 <el-table-column  label="操作" width="150" align="center" >
                    <template slot-scope="scope">
                        <el-button type="text" @click="downFile(scope.row)">详情报告</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="text-align:right;padding: 8px 16px 8px 0;
    background: #fff;" background :current-page="queryObj.pageNo" :page-size="queryObj.pageSize" :page-sizes="[20, 50, 80, 100, 200, 500]" :total="total" :pager-count="7" layout="total, sizes, prev, pager, next, jumper" @current-change="changepageNo" @size-change="changePageSize"></el-pagination>

        </div>
    </div>
</template>

<script>
import { queryList as task_queryList,download_report, queryQuotasAttribute,quotasResultQueryList, queryAbnormolQuotasList} from '@/api/tzyy/mxkc'

export default {
    name: 'xsjk-list',

    data() {
        return {
            loading: false,
            fieldsList: [
                {
                    label: '纳税人名称',
                    field: 'nsrmc',
                    type: 'text',
                    value: '',

                },

                {
                    label: '异常点',
                    field: 'quotas_name',
                    type: 'select',
                    options: [
                    ],
                    value: ''
                },


            ],
            //右侧表格开始v
            tableColumns: [
                {
                    label: '纳税人名称',
                    prop: 'nsrmc',
                    align: 'center',
                    minWidth: 120,

                },
                {
                    label: '纳税人识别号',
                    prop: 'nsrsbh',
                    align: 'center',
                    minWidth: 100,
                },
                {
                    label: '异常点',
                    prop: 'quotas_name',
                    align: 'center',
                    minWidth: 80,
                },
                // {
                //     label: '操作',
                //     align: 'center',
                //     width: 200,
                //     render: (h, params) => {
                //         return (
                //             <span>
                //                 <el-button type="text" onClick={() => this.go('detail', params.row)}>详情报告</el-button>
                //             </span>
                //         );
                //     }
                // }
            ],
            tableDatas: [

            ]
            , queryObj: {
                nsrmc: '',
                quotas_name: '',


                pageNo: 1,
                pageSize: 20
            },
            total: 0,
            selectedRows: [],

        }
    },

    mounted() {
        this.getqueryAbnormolQuotasList();

    },
    methods: {

        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.nsrmc = params.nsrmc || '';
            this.queryObj.quotas_name = params.quotas_name || '';

            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.tableDatas = []
            this.total = 0
        },

        getTableData() {
            this.loading = true;
            let params = {
                nsrmc: this.queryObj.nsrmc,
                quotas_name: this.queryObj.quotas_name,
                // yxbz: 'Y',
                // status: 'Y',
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,
            }
            quotasResultQueryList(params).then(res => {
                console.log(res)
                this.loading = false;
                if (res.code == 200) {
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                }
            })
        },
        getqueryAbnormolQuotasList() {

            queryAbnormolQuotasList({}).then(res => {
                if (res.code == 200) {
                    // this.zbbq = res.data
                    this.fieldsList[1].options = res.data.map(item => {
                        return {
                            label: item,
                            value: item
                        }
                    })


                }
            })
        },  //获取指标类型

        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
        },
         downFile(row) {
            this.loading = true
            download_report({ nsrsbh: row.nsrsbh,quotas_id:row.quotas_id,batch_id:row.task_batch_id }).then(res => {
                console.log(res)
                this.loading = false

                const blob = new Blob([res], {
                    type: "application/msword"
                });
                const elink = document.createElement("a");
                elink.download = localStorage.getItem('jmFileName')||'异常详情报告.docx';
                elink.style.display = "none";
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href); // 释放URL 对象
                document.body.removeChild(elink);
            })
        },
       currIndex(index) {
            return (this.queryObj.pageNo - 1) * this.queryObj.pageSize + index + 1;
            //  pageNum: this.queryObj.pageNo,
            //     pageSize: this.queryObj.pageSize,
        },
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },



    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    // padding: 8px;

    .btn {
        padding: 8px 8px 8px 0;
    }

    ::v-deep .undertxt {
        color: rgb(64, 158, 255);
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    ::v-deep .undertxtRed {
        color: rgb(217, 0, 27);
        cursor: pointer;
        text-decoration: underline;
        &:hover {
        }
    }
    ::v-deep .undertxtBlue {
        color: #0000ff;
        cursor: pointer;
        text-decoration: underline;
        &:hover {
        }
    }
}
::v-deep .el-date-editor {
    width: 220px;
}
</style>
